<template>
	<view class="content">
		<view class="navigation_bar">
			<uni-icons type="back" size="24" color="#3C3C3C" @click='GoBack'></uni-icons>
			<view class="center">跨转记录</view>
		</view>
		<view class="detailsList">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="left">
						<view class="title">{{item.swapRemark}}</view>
						<view class="date">{{formatTime(new Date(item.swapTime*1000), "yyyy-MM-dd hh:mm:ss")}}</view>
					</view>
					<view class="right">{{item.swapType ==0?'+':'-' }} {{item.point}}</view>
				</view>
			</view>
		</view>
		<view class="noneContent" v-if="list.length == 0">
			<image src="/static/withdraw/noneCard.png" class="noneImg"></image>
			<view class="tips">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {swapPointDetails} from '@/api/api.js'
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 12,
				pages:''
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.pages <= this.pageNum) {
				uni.showToast({
					icon: 'none',
					title: '暂无更多~'
				})
				return
			} else {
				this.pageNum++
				// 获取列表
				this.getList()
			}
		},
		methods:{
			getList(){
				let data = {
					current: this.pageNum,
					size: this.pageSize,
				}
				swapPointDetails(data).then(res=>{
					if(res.code == 200){
						this.list = this.list.concat(res.data.records)
						this.pages = res.data.pages
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		padding: 123rpx 24rpx;

		.navigation_bar {
			padding: 43rpx 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: calc(100% - 26rpx);

			.center {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-weight: 500;
				font-size: 32rpx;
				color: #181A1C;
			}
		}
		.detailsList{
			.list{
				.item{
					border-bottom: 1rpx solid #E3E3E3;
					padding: 29rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						.title{
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
						}
						.date{
							font-weight: 400;
							font-size: 30rpx;
							color: #999999;
							margin-top: 10rpx;
						}
					}
					.right{
						font-weight: 600;
						font-size: 36rpx;
						color: rgb(35, 200, 126);
					}
				}
			}
		}
		.noneContent {
			display: flex;
			align-items: center;
			flex-direction: column;
		
			.noneImg {
				margin-top: 132rpx;
				width: 320rpx;
				height: 291rpx;
			}
		
			.tips {
				margin-top: 36rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B8B8B8;
				line-height: 33rpx;
			}
		}
	}
</style>